<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      class="nav"
      title="会员页面"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <van-cell is-link title="了解vip" />
    <van-cell is-link class="title" title="购买vip" @click="show = true" />
    <van-action-sheet v-model="show" title="购买vip">
      <div class="content">
        <div @click='gobuy'>购买vip</div>
        <div>购买vvip</div>
        <div>购买vvvip</div>
        <div style="font-size: 12px; color: gray" @click="onCancel" class="qs">
          取消购买
        </div>
      </div>
    </van-action-sheet>
    <van-cell is-link title="购买vvip" />
    <van-cell is-link title="购买vvvip" />

    <!-- vip购买确认弹窗 -->
    <van-dialog
      autofocus
      v-model="showbuy"
      title="您确定要购买vip吗?"
      show-cancel-button
      :before-close="beforeCloseFn"
    >
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
    showbuy:false,
      show: false,
    };
  },
    computed: {
    ...mapState("user", [
      "loginStatus",
      "userInfo",
    ])},
  methods: {
    // 数据回显函数
    ...mapMutations("user", ["updateOnceProperty"]),
    // 点击购买弹窗
    gobuy(){
        this.showbuy=true
    },
        // 让弹窗关闭
    beforeCloseFn(action, done) {
      // console.log(action);
      if (action == "confirm") {
        let i=(Math.random()+1).toFixed(2)
        console.log(i,typeof i);
        let params=`vip=${i}&userid=${this.userInfo.userid}`
        this.axios.post("/users/vip",params).then(res=>{
            console.log(res);
            this.updateOnceProperty({
                key: "isVip",
                value: 1,
              });
        })
        this.show=false
          done();
          }  else {
        // 取消
        done(); //让弹窗关闭
      }
    },
    // 点击返回
    onClickLeft() {
      this.$router.go(-1);
    },
    // 点击选项
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    // 点击取消
    onCancel() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__left {
  .van-nav-bar__text {
    color: #fff;
  }
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

::v-deep .van-nav-bar__title {
  color: #fff;
}
::v-depp .van-nav-bar__text {
  color: #fff !important;
}
.nav {
  background-color: #36c14c;
  span {
    color: #fff;
  }
}
::v-deep .van-popup--bottom.van-popup--round {
  text-align: center;
  margin: 0 auto;
  div {
    line-height: 50px;
    font-size: 16px;
    border-bottom: 1px solid gray;
    width: 85%;
    margin: 0 auto;
  }
}
::v-deep .van-action-sheet__header {
  background-color: #36c14c;
  width: 100% !important;
  color: white;
  font-size: 32px;
  line-height: 60px;
}
::v-deep .qx {
  color: gray !important;
  font-size: 12px;
}
</style>
